<template>
    <div class="bob">
      <div id="login-box">
        <h3 class="login_title">宠派用户注册</h3>
        <div class="form">
          <div class="item">
            <input type="text" v-model="miZhangHao" placeholder="Username" />
            <input type="password" v-model="miMiMa" placeholder="Password" />
          </div>
        </div>
        <div class="button">
          <router-link to=""
            ><el-button :plain="true" @click="getStudents"
              >确定</el-button
            ></router-link
          >
          
        </div>
      </div>
    </div>
  </template>

<script>
import axios from "axios";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
setup() {
    let router = useRouter();
    let miZhangHao = ref("");
    let miMiMa = ref("");
    function getStudents() {
      axios
        .get(
          `http://localhost:8080/api/index2?zhuCeZhangHao=${miZhangHao.value}&zhuCeMiMa=${miMiMa.value}`
        )
        .then((res) => {
          if (res.data == "账号已注册，不能重复") {
            alert("账号已注册");
          } else if (res.data == "成功") {
            router.push({
              name: "dlk",
            });
            alert('注册成功')
          }
          console.log(res);
        });
    }
    return{
        router,
        miZhangHao,
        miMiMa,
        getStudents
    }
}
}
</script>

<style >
.item input {
  width: 237px;
  height: 34px;
}
.button {
  position: relative;
  top: 25px;
  width: 235px;
  height: 40px;
  left: 24px;
}
.button .top {
  position: absolute;
}
.form {
  position: relative;
  width: 275px;
  height: 80px;
}
.item {
  position: absolute;
  left: 20px;
}
.bob {
  width: 350px;
  border: 1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 53px 35px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  box-sizing: border-box;
}
.login_title {
  text-align: center;
  margin-bottom: 5px;
  color: #505458;
}
</style>

